<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>

</head>
<style>
    img{
        width: 100px;
    }
</style>
<body>
     <!-- 某些属性值想做差值运算 就可以使用 v-bind
            只要在表达式中写上 v-bind:a 就会在VM上查找a -->
    <div id="app">
        <!-- 这个是系统自动查询地址为imgurl的图片 -->
        1<img v-bind:src="imgurl" alt="">
        <!-- 带上v-bind 后，系统会自动查询VM上含imgurl属性的值 -->
        2<img v-bind:src="imgurl" alt="">
        <!-- 这个是上一种的简写 -->
        3<img :src="imgurl" alt="">
        <!-- 这个是在p标签上添加data-count 的属性 -->
        <p v-bind:data-count="count">9</p>
        <!-- 这个是吧MV中的count值赋给p标签 -->
        <p :data-count="count">8</p>
        
        <!-- 如果v-bind内部需要拼接可以使用以下两种方式 -->
        <!-- src 返回的是一个字符串，可以使用字符串拼接或用模板字符串拼接 -->
        4<img :src="publicUrl+'logo.svg'" alt="">
        5<img :src="`${publicUrl}logo.svg`" alt="">
        
    </div>        
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            el:'#app',
            data(){
                return{
                    count:2,
                    imgurl: "https://v2.cn.vuejs.org/images/logo.svg",
                    publicUrl:"https://v2.cn.vuejs.org/images/",
                }
            }
        })
        
    </script>
</body>
</html>